<template>
  <div class="news">
    <div
      v-for="(item, index) in newlist"
      :key="index"
      @click="geDetail(item);"
      class="items clearBoth pointer">
      <div class="img left">
        <img :src="getImg(item)" alt="">
      </div>
      <div class="content left">
        <p class="title">{{ item.XWGL_BT }}</p>
        <p class="text">{{ item.XWGL_ZY }}</p>
      </div>
      <div class="time left">
        <div v-html="utilsTime(item.SY_CREATETIME)"></div>
      </div>
    </div>
    <el-dialog :visible.sync="fullScreen" top="0" fullscreen :modal-append-to-body="false" :show-close="false">
      <i class="jeicon jeicon-minus pointer" @click="hiddendialog"></i>
      <div class="page__content page_news_full">
        <div class="scroll">
          <div
            v-for="(item, index) in list"
            :key="index"
            @click="geDetail(item)"
            class="listItem clearBoth pointer">
            <div class="img left abc">
              <img :src="getImg(item)" alt="">
            </div>
            <div class="content left">
              <p class="title">{{ item.XWGL_BT }}</p>
              <p class="text">{{ item.XWGL_ZY }}</p>
            </div>
            <div class="time right">
              <div v-html="utilsTime(item.SY_CREATETIME, 'full')"></div>
            </div>
          </div>
          <page-bar
            v-if="params.limit < params.total"
            ref="pagebar"
            :page-size="params.limit"
            :total-count="params.total"
            @load="searchData"
            style="margin-top: 20px;"></page-bar>
        </div>
      </div>
    </el-dialog>
    <detail :visible="showDetail" :item="item" :num="num" @close="hidedetail"></detail>
  </div>
</template>

<script>
import detail from './../newsdetail';
import PageBar from '../../../../components/listview/pagebar.vue';
import { updateReadNum } from '../../actions/api.js';

export default {
  name: 'index',
  components: { detail, PageBar },
  props: {
    list: {
      type: Array,
      default: []
    },
    homenlist: {
      type: Array,
      default: []
    },
    fullScreen: {
      type: Boolean,
      default: false,
    },
    detailFullScreen: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: {},
    },
  },
  computed: {
    newlist() {
      return this.homenlist.slice(0, 3);
    },
  },
  data() {
    return {
      item: {},
      showDetail: false,
      pageSize: 3,
      pageCount: 1,
      totalCount: 0,
      num: null,
    }
  },
  methods: {
    searchData(page) {
      this.$emit('searchNews', page);
    },
    geDetail(item) {
      updateReadNum({ id: item.VIP_XWGL_ID }).then((data) => {
        this.item = item;
        this.num = data.obj;
        this.showDetail = true;
        this.$emit('detailFullScreen', true);
      })
    },
    hidedetail() {
      this.showDetail = false;
      this.item = {};
      this.$emit('detailFullScreen', false);
    },
    utilsTime(time, type) {
      const ymd = time.split(' ')[0];
      const y = ymd.split('-')[0];
      const md = `${ymd.split('-')[1]}-${ymd.split('-')[2]}`;
      if (type && type === 'full') {
        return `
          <p style="font-size: 24px;">${md}</p>
          <p style="font-size: 16px;">${y}</p>
        `;
      }
      return `
        <p style="font-size: 13px;">${md}</p>
        <p style="font-size: 12px;">${y}</p>
      `;
    },
    hiddendialog() {
      this.$emit('hiddendialog');
    },
    getImg(item) {
      if (!item.XWGL_FMTP) return;
      const url = item.XWGL_FMTP.split('*')[1];
      return JE.getFileUrl(url,'','','','VIP_XWGL');
    },
  }
}
</script>

<style lang="scss" scoped>
  .news {
    .items {
      border: 1px solid rgb(224, 224, 224);
      padding: 5px;
      &:not(:first-child) {
        margin-top: 10px;
      }
      .img {
        // border: 1px solid black;
        width: 140px;
        height: 90px;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        margin-left: 15px;
        width: 300px;
        line-height: initial;
        .title {
          font-size: 14px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          overflow: hidden;
          /* autoprefixer:off */
          -webkit-box-orient: vertical;
          /* autoprefixer:on */
        }
        .text {
          margin-top: 5px;
          font-size: 12px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          overflow: hidden;
          color: #999999;
          /* autoprefixer:off */
          -webkit-box-orient: vertical;
          /* autoprefixer:on */
        }
      }
      .time {
        padding-left: 20px;
        margin-left: 20px;
        width: 70px;
        height: 90px;
        position: relative;
        > div {
          color: #999999;
          position: absolute;
          top: 50%;
          transform: translate(0, -50%);
        }
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 10px;
          bottom: 10px;
          border-left: 1px solid rgb(224, 224, 224);
        }
        &:after {
          content: '';
          width: 6px;
          height: 6px;
          border: 2px solid rgb(224, 224, 224);
          border-left-color: transparent;
          border-bottom-color: transparent;
          transform: rotate(45deg) translate(0, -50%);
          position: absolute;
          right: 5px;
          top: 50%;
        }
      }
    }
  }
</style>
<style lang="scss">
  .jeicon-minus {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .page_news_full {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    position: relative;
    overflow: hidden;
    .scroll {
      width: 1220px;
      padding-right: 20px;
      overflow-y: auto;
      height: 100%;
      .listItem {
        padding: 21px 36px;
        border: 1px solid #e8e8e8;
        &:not(:first-child) {
          margin-top: 30px;
        }
        &:hover {
          box-shadow: 0 0 16px 0px rgba(0,0,0,0.14);
        }
        .img {
          width: 240px;
          height: 182px;
          overflow: hidden;
          // border: 1px solid #000000;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        .content {
          width: 600px;
          margin-left: 40px;
          padding-right: 40px;
          position: relative;
          top: 20px;
          .title {
            font-size: 18px;
          }
          .text {
            font-size: 14px;
            margin-top: 20px;
          }
        }
        .time {
          padding-left: 20px;
          margin-left: 20px;
          width: 100px;
          height: 90px;
          position: relative;
          top: 40px;
          > div {
            color: #999999;
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
          }
          &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 10px;
            bottom: 10px;
            border-left: 1px solid rgb(224, 224, 224);
          }
          &:after {
            content: '';
            width: 15px;
            height: 15px;
            border: 1px solid rgb(224, 224, 224);
            border-left-color: transparent;
            border-bottom-color: transparent;
            transform: rotate(45deg) translate(0, -50%);
            position: absolute;
            right: 5px;
            top: 50%;
          }
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .pointer {
    cursor: pointer;
  }
  .clearBoth {
    &:after {
      content: '';
      clear: both;
      display: table;
    }
  }
  .m30 {
    margin-top: 30px;
  }
</style>
